//防抖函数
//第一版  this会指向window
function debounce1(func,wait) {
    let timeout;
    return function () {
        clearTimeout(timeout)
        timeout = setTimeout(func,wait)
    }
}
//解决了this指向问题
function debounce2(func,wait){
    let timeout;
    return function () {
        //console.log(this)   //<div id="container"></div>
        let context = this;
        clearTimeout(timeout);
        timeout = setTimeout(function () {
            func.apply(context)
        },wait)
    }
}
//解决了event 指向问题
function debounce3(func,wait){
    let timeout;
    return function () {
        //console.log(this)   //<div id="container"></div>
        console.log(arguments)
        let context = this;
        let args = arguments;
        clearTimeout(timeout);
        timeout = setTimeout(function () {
            func.apply(context,args)
        },wait)
    }
}
//立即执行
function debounce4(func,wait,immediate){
    let timeout;
    return function () {
        //console.log(this)   //<div id="container"></div>
        //console.log(arguments)
        let context = this;
        let args = arguments;
        clearTimeout(timeout);
        if(immediate){  //立即执行
            let callNow = !timeout;
            console.log(timeout)
            timeout = setTimeout(function () {
                timeout = null
            },wait);
            if (callNow) func.apply(context,args)

        }else {
            timeout = setTimeout(function () {
                func.apply(context,args)
            },wait)
        }


    }
}


function debounce4(func,wait,immediate){
    let timeout;
    return function () {
        //console.log(this)   //<div id="container"></div>
        //console.log(arguments)
        let context = this;
        let args = arguments;
        clearTimeout(timeout);
        if(immediate){  //立即执行
            let callNow = !timeout;
            console.log(timeout)
            timeout = setTimeout(function () {
                timeout = null
            },wait);
            if (callNow) func.apply(context,args)
        }else {
            timeout = setTimeout(function () {
                func.apply(context,args)
            },wait)
        }
    }
}
//添加取消函数执行
function debounce(func,wait,immediate){
    let timeout,result;
    let debounce = function () {
        //console.log(this)   //<div id="container"></div>
        //console.log(arguments)
        let context = this;
        let args = arguments;
        clearTimeout(timeout);
        if(immediate){  //立即执行
            let callNow = !timeout;
            console.log(timeout)
            timeout = setTimeout(function () {
                timeout = null
            },wait);
            if (callNow) result =  func.apply(context,args)
        }else {
            timeout = setTimeout(function () {
                func.apply(context,args)
            },wait)
        }
        return result;
    }
    debounce.prototype.cancel = function () {
        clearTimeout(timeout)
        timeout = null

    }
    return debounce
}
var count = 0;
var container = document.querySelector('#container');
function doSomeThing(e) {
    // console.log(this);
    // console.log(e);   //undefined
    // 发请求或进行复杂的计算比较耗性能
    container.innerHTML = count++;
}
console.log(container)
//高阶函数
container.onmousemove = debounce(doSomeThing,1000,true);

//防抖：事件响应函数在一段时间后才执行，如果在规定时间内再次调用，则重新计算执行时间

